<template>
	<view>
		<view class="card">
			<view class="fuzzy-box"><!-- 模糊框 --></view>
			<image class="card_img" src="/static/images/my/balance-bg.png" mode="widthFix"></image>
			<view class="card-content u-flex u-flex-between">
				<view>
					<view>
						<image class="sym m-r10" src="/static/images/my/icon-money.png" mode="widthFix"></image>
						<text>余额</text>
					</view>
					<view class="num">{{$u.priceFormat(money,2)}}</view>
				</view>
				<view class="btn" @click.stop="openUrl('/pages/my/withdrawal')">提现</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			money:{
				type:[String,Number],
				default:''
			}
		},
		data() {
			return {
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.card_img {
		width: 100%;
		height: 240rpx;
	}
	.sym {
		width: 40rpx;
		height: 40rpx;
	}
	.card {
		position: relative;
	}
	.card-content {
		position: absolute;
		top: 50%;
		left: 30rpx;
		right: 30rpx;
		transform: translateY(-50%);
		color: #fff;
		.btn {
			width: 146rpx;
			height: 60rpx;
			background: linear-gradient( 90deg, #DCB48C 0%, #FFE0C1 100%);
			line-height: 60rpx;
			border-radius: 12rpx;
			color: #613C16;
			text-align: center;
			font-size: 26rpx;
		}
		.num {
			font-size: 60rpx;
			line-height: 80rpx;
			margin-top: 20rpx;
		}
	}
	.fuzzy-box {
		width: 630rpx;
		height: 210rpx;
		background: linear-gradient( 90deg, #202E5B 0%, #0E1841 100%);
		border-radius: 16rpx;
		opacity: 0.5;
		filter: blur(11rpx);
		position: absolute;
		top: 46rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>